<template>
	<div id="app">


		<el-container style="height: 700px; border: 1px solid #eee">
			<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
				<div class="sidebar-title">后台管理系统</div>
				<menus :menus="menus"> </menus>
			</el-aside>

			<el-container>

				<el-header style="text-align: right; font-size: 12px">

					<el-dropdown size="medium" @command="handleCommand">
						<i class="el-icon-setting" style="margin-right: 15px">
							<el-tag type="success"><samp>用户:{{user.userName}}</samp></el-tag>
						</i>
						<el-dropdown-menu slot="dropdown">

							<el-dropdown-item divided command="quit">退出登录</el-dropdown-item>
							<el-dropdown-item divided command="personal">个人中心</el-dropdown-item>
							<el-dropdown-item>查看</el-dropdown-item>
							<el-dropdown-item>新增</el-dropdown-item>
							<el-dropdown-item>删除</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
					<!-- <el-tag type="success"><samp>用户:{{user.userName}}</samp></el-tag> -->
					<!-- 					<img v-if="user.userImage" :src="user.userImage" class="avatar"
							style="width: 50px;"> -->
				</el-header>
				<el-main>

					<router-view></router-view>
				</el-main>
			</el-container>
		</el-container>

	</div>
</template>
<script>
	import menus from '@/components/Menus.vue'
	export default {
		name: 'App',
		components: {
			menus
		},
		data() {
			return {
				user: [],
				menus: []
			}
		},
		methods: {
			goBack() {
				console.log('go back');
			},
			handleCommand(command) {
				switch (command) {
					case 'quit':
						this.backLogin();
						break;
					case 'personal':
						// alert("个人中心");
						this.$router.push('/main/personalCenter');
						break;
				}
			},
			selectNav(index) {

				this.$router.push(index);
			},
			loadUserInfo() {
				let json = localStorage.getItem("com.woniu-account");
				let acc = JSON.parse(json)
				this.$http.get("/user-table/findUserById/" + acc.userId).then(resp => {
					if (resp.data.code == 200) {
						this.user = resp.data.data;
					}
				})
			},
			backLogin() {
				this.$http.get("/logout")
			},
			listMenus() {
				this.$http.post("/menu-table/listMenusByUserId.do").then(resp => {
					if (resp.data.code == 200) {
						this.menus = resp.data.data;
					}
				})


			}
		},
		created() {
			this.loadUserInfo();
			this.listMenus();
		}
	}
</script>


<style>
	* {
		box-sizing: border-box;
		font-size: 13px;
		padding: 0;
		margin: 0;
	}

	.main-content {
		padding: 10px 10px;
	}

	.el-header {
		background-color: #B3C0D1;
		color: #333;
		line-height: 60px;
	}

	.el-aside {
		color: #333;
	}

	.sidebar-title {
		width: 100%;
		height: 60px;
		border-bottom: 1px solid #dcdfe6;
		color: #ffffff;
		box-sizing: border-box;
		text-align: center;
		line-height: 60px;
		font-size: 16px;
		background-image: linear-gradient(rgb(0, 21, 41), rgb(0, 21, 41));

	}
</style>
